<template>
  <div>
    <a-card>
      <div class="text-xl font-bold mb-4">工位管理</div>
      <a-button type="primary" @click="addEvent">新增</a-button>
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #action="{ row }">
          <vxe-button
            status="primary"
            content="编辑"
            @click="editRow(row)"
          ></vxe-button>
          <a-popconfirm
            title="确认删除吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="delRecord(row)"
          >
            <vxe-button status="error" content="删除"></vxe-button>
          </a-popconfirm>
        </template>
      </vxe-grid>
    </a-card>
    <DraggableModal
      v-model:open="showEditPopup"
      title="新增工位"
      :centered="true"
      :keyboard="false"
      @ok="confirmEvent"
    >
      <div>
        <a-form-item-rest>
          <vxe-form ref="formRef" v-bind="formOptions"></vxe-form>
        </a-form-item-rest>
      </div>
    </DraggableModal>
  </div>
</template>

<script setup lang="ts">
import XEUtils from "xe-utils";
import Api from "@/api/backend/api";

const { gridOptions } = useParking();

const xGrid = ref();
const formRef = ref();
const loading = ref(false);
const selectRow = ref<RowVO>();
const defaultData: RowVO = {
  id: null,
  parking_type: "",
  no: "",
};

const formOptions = reactive<VxeFormProps<RowVO>>({
  titleWidth: 100,
  titleAlign: "right",
  titleColon: true,
  data: XEUtils.clone(defaultData, true),
  rules: {
    parking_type: [
      { required: true, message: "请输入" },
      { min: 2, max: 5, message: "长度在 2 到 5 个字符" },
    ],
    no: [{ required: true, message: "请输入" }],
  },
  items: [
    {
      field: "parking_type",
      title: "类型",
      span: 24,
      itemRender: { name: "VxeInput" },
    },
    {
      field: "no",
      title: "编号",
      span: 24,
      itemRender: { name: "VxeInput" },
    },
  ],
});
const addEvent = () => {
  selectRow.value = undefined;
  formOptions.data = XEUtils.clone(defaultData, true);
  showEditPopup.value = true;
};

const editRow = (row: RowVO) => {
  selectRow.value = row;
  formOptions.data = Object.assign(XEUtils.clone(defaultData, true), row);
  showEditPopup.value = true;
};

const confirmEvent = async () => {
  const $form = formRef.value;
  console.log($form.data);
  if ($form) {
    const errMap = await $form.validate();
    if (!errMap) {
      if ($form.data.id != null) {
        await Api.parkingController.update(
          {
            id: $form.data.id,
          },
          $form.data
        );

        showEditPopup.value = false;
        xGrid.value.commitProxy("query");
      } else {
        await Api.parkingController.store($form.data);

        showEditPopup.value = false;
        xGrid.value.commitProxy("query");
      }
    }
  }
};

const delRecord = async (row) => {
  await Api.parkingController.destroy({
    id: row.id,
  });
  xGrid.value.commitProxy("query");
};
const showEditPopup = ref(false);
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
</script>

<style></style>
